<!DOCTYPE html>
<html>
<head>
<title>mouse_test</title>
<script src="test_bootstrap.js"></script>
<script type="text/javascript">
  goog.require('bot.Mouse');
  goog.require('bot.action');
  goog.require('bot.userAgent');
  goog.require('goog.dom');
  goog.require('goog.events');
  goog.require('goog.events.EventType');
  goog.require('goog.math.Coordinate');
  goog.require('goog.testing.jsunit');
  goog.require('goog.userAgent');
</script>
<body>
<script type="text/javascript">
  // The goog.events.EventType enum is missing mouse scrolling event types.
  // This a little hacky but gives us some stylistic consistency :).
  goog.events.EventType.MOUSEWHEEL =
    goog.userAgent.GECKO ? 'DOMMouseScroll' : 'mousewheel';
  goog.events.EventType.MOUSEPIXELSCROLL = 'MozMousePixelScroll';

  var events = [];
  var greenDiv, redDiv;
  var MOUSE_EVENTS = [
    goog.events.EventType.MOUSEOUT,
    goog.events.EventType.MOUSEOVER,
    goog.events.EventType.MOUSEMOVE,
    goog.events.EventType.MOUSEDOWN,
    goog.events.EventType.MOUSEUP,
    goog.events.EventType.MOUSEWHEEL,
    goog.events.EventType.MOUSEPIXELSCROLL,
    goog.events.EventType.CLICK,
    goog.events.EventType.CONTEXTMENU,
    goog.events.EventType.DBLCLICK
  ];

  function setUpPage() {
    greenDiv = bot.locators.findElement({id: 'green'});
    redDiv = bot.locators.findElement({id: 'red'});
  }

  function setUp() {
    bot.getDocument().documentElement.focus();
    events = [];
    goog.events.removeAll();

    goog.events.listen(greenDiv, MOUSE_EVENTS, function(e) {
      events.push(e.type);
      events.push(e.target);
      events.push(e.button);
    });
  }

  /**
   * Returns the button value in the object depending on the current useragent.
   * Returns the 'wk' property for WebKit and IE9 in standards mode, the 'ie'
   * property for IE, and the 'ff' property for Firefox and Opera.
   */
  function b(button) {
    return bot.userAgent.IE_DOC_9 || goog.userAgent.WEBKIT ? button['wk'] :
        (goog.userAgent.IE ? button['ie'] :
            button['ff']);  // Firefox or Opera
  }

  function assertEvents(expectedEvents) {
    assertArrayEquals(expectedEvents, events);
    events = [];
  }

  function testNoClickWhenPressHiddenElement() {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    goog.style.showElement(greenDiv, false);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();

    assertEvents([
      goog.events.EventType.MOUSEOVER, greenDiv, 0,
      goog.events.EventType.MOUSEMOVE, greenDiv, 0
    ]);
    goog.style.showElement(greenDiv, true);
  }

  function testLeftClick() {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(redDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();

    assertEvents([
      goog.events.EventType.MOUSEOVER, redDiv, 0,
      goog.events.EventType.MOUSEMOVE, redDiv, 0,
      goog.events.EventType.MOUSEDOWN, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.MOUSEUP, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.CLICK, redDiv, 0
    ]);
  }

  function testNoLeftClickWhenReleasedOverOtherElement() {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.move(redDiv, coords);
    mouse.releaseButton();

    // No click if we released on another element.
    assertEvents([
      goog.events.EventType.MOUSEOVER, greenDiv, 0,
      goog.events.EventType.MOUSEMOVE, greenDiv, 0,
      goog.events.EventType.MOUSEDOWN, greenDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.MOUSEOUT, greenDiv, 0,
      goog.events.EventType.MOUSEOVER, redDiv, 0,
      goog.events.EventType.MOUSEMOVE, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.MOUSEUP, redDiv, b({ie: 1, wk: 0, ff: 0})
    ]);
  }

  function testRightClick() {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    mouse.pressButton(bot.Mouse.Button.RIGHT);
    mouse.move(redDiv, coords);
    mouse.releaseButton();

    // Right click triggers contextmenu even when released over another element.
    assertEvents([
      goog.events.EventType.MOUSEOVER, greenDiv, 0,
      goog.events.EventType.MOUSEMOVE, greenDiv, 0,
      goog.events.EventType.MOUSEDOWN, greenDiv, 2,
      goog.events.EventType.MOUSEOUT, greenDiv, b({ie: 0, wk: 2, ff: 0}),
      goog.events.EventType.MOUSEOVER, redDiv, b({ie: 0, wk: 2, ff: 0}),
      goog.events.EventType.MOUSEMOVE, redDiv, b({ie: 2, wk: 2, ff: 0}),
      goog.events.EventType.MOUSEUP, redDiv, 2,
      goog.events.EventType.CONTEXTMENU, redDiv, b({ie: 0, wk: 2, ff: 2})
    ]);
  }

  function testDoubleClick() {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(redDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();

    assertEvents([
      goog.events.EventType.MOUSEOVER, redDiv, 0,
      goog.events.EventType.MOUSEMOVE, redDiv, 0,
      goog.events.EventType.MOUSEDOWN, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.MOUSEUP, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.CLICK, redDiv, 0,
      goog.events.EventType.MOUSEDOWN, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.MOUSEUP, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.CLICK, redDiv, 0,
      goog.events.EventType.DBLCLICK, redDiv, 0
    ]);
  }

  function testNoDoubleClickWhenTheMouseMovesBetweenClicks() {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();
    mouse.move(redDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();

    assertEvents([
      goog.events.EventType.MOUSEOVER, greenDiv, 0,
      goog.events.EventType.MOUSEMOVE, greenDiv, 0,
      goog.events.EventType.MOUSEDOWN, greenDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.MOUSEUP, greenDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.CLICK, greenDiv, 0,
      goog.events.EventType.MOUSEOUT, greenDiv, 0,
      goog.events.EventType.MOUSEOVER, redDiv, 0,
      goog.events.EventType.MOUSEMOVE, redDiv, 0,
      goog.events.EventType.MOUSEDOWN, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.MOUSEUP, redDiv, b({ie: 1, wk: 0, ff: 0}),
      goog.events.EventType.CLICK, redDiv, 0
    ]);
  }

  function testMoveOnSameElement() {
    var coords1 = new goog.math.Coordinate(5, 5);
    var coords2 = new goog.math.Coordinate(10, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords1);
    mouse.move(greenDiv, coords2);

    assertEvents([
      goog.events.EventType.MOUSEOVER, greenDiv, 0,
      goog.events.EventType.MOUSEMOVE, greenDiv, 0,
      goog.events.EventType.MOUSEMOVE, greenDiv, 0
    ]);
  }

  function testMoveToAnotherElement() {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    mouse.move(redDiv, coords);

    assertEvents([
      goog.events.EventType.MOUSEOVER, greenDiv, 0,
      goog.events.EventType.MOUSEMOVE, greenDiv, 0,
      goog.events.EventType.MOUSEOUT, greenDiv, 0,
      goog.events.EventType.MOUSEOVER, redDiv, 0,
      goog.events.EventType.MOUSEMOVE, redDiv, 0
    ]);
  }

  function testFirstMoveHasNullRelated() {
    var mouse = new bot.Mouse();

    var fired = 0;

    goog.events.listenOnce(greenDiv, goog.events.EventType.MOUSEOVER,
        function(e) {
          fired++;
          assertNull(e.relatedTarget);
        });

    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));

    assertEquals(1, fired);
  }


  function testSecondMoveHasRelatedSet() {
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));

    var fired = 0;
    var relatedTarget;
    goog.events.listen(redDiv, goog.events.EventType.MOUSEOVER,
        function(e) {
          fired++;
          // Catch the relatedTarget here, but check it below so any errors are
          // handled correctly in IE.
          relatedTarget = e.relatedTarget;
        });

    mouse.move(redDiv, new goog.math.Coordinate(5, 5));
    assertEquals('mouseover event not fired', 1, fired);
    assertNotNull(relatedTarget);
    assertNotEquals(redDiv, relatedTarget);
  }

  function testScrollMouseZeroTicksThrowsError() {
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));
    assertThrows(function() {
      mouse.scroll(0);
    });
  }

  function testScrollMouseDown() {
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));
    mouse.scroll(1);

    if (goog.userAgent.GECKO) {
      assertEvents([
        goog.events.EventType.MOUSEOVER, greenDiv, 0,
        goog.events.EventType.MOUSEMOVE, greenDiv, 0,
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0,
        goog.events.EventType.MOUSEPIXELSCROLL, greenDiv, 0
      ]);
    } else {
      assertEvents([
        goog.events.EventType.MOUSEOVER, greenDiv, 0,
        goog.events.EventType.MOUSEMOVE, greenDiv, 0,
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0
      ]);
    }
  }

  function testScrollMouseUp() {
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));
    mouse.scroll(-2);

    if (goog.userAgent.GECKO) {
      assertEvents([
        goog.events.EventType.MOUSEOVER, greenDiv, 0,
        goog.events.EventType.MOUSEMOVE, greenDiv, 0,
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0,
        goog.events.EventType.MOUSEPIXELSCROLL, greenDiv, 0,
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0,
        goog.events.EventType.MOUSEPIXELSCROLL, greenDiv, 0
      ]);
    } else {
      assertEvents([
        goog.events.EventType.MOUSEOVER, greenDiv, 0,
        goog.events.EventType.MOUSEMOVE, greenDiv, 0,
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0,
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0
      ]);
    }
  }
</script>
<div id="green" style="background-color:green; width:100px; height:50px">
<div id="red" style="background-color:red; width:50px; height:25px;
position: relative; top:25px;">
Red</div>
</div>
</body>
</html>
